<template>
  <div>
    <y-shelf title="售后服务">
      <div slot="content">
        <div v-loading="loading" element-loading-text="加载中..." v-if="orderLists.length>0" style="min-height: 10vw;">
          <div v-for="(item,i) in orderLists" :key="i">
            <div class="gray-sub-title cart-title">
              <div class="first">
                <div>
                  <span class="date" v-text="item.createTime |filterDate"></span>
                  <span class="order-id"> 订单号： <a @click="orderDetail(item.id)">{{item.orderSn}}</a> </span>
                </div>
                <div class="f-bc">

                  <span class="price">单价</span>
                  <span class="num">数量</span>
                  <span class="operation">申请金额</span>
                </div>
              </div>
              <div class="last">
                <span class="sub-total">实付金额</span>
                <span class="order-detail"> <a @click="orderDetail(item.id)">查看详情 ><em class="icon-font"></em></a> </span>
              </div>
            </div>
            <div class="pr">
              <div class="cart" >
                <div class="cart-l" :class="bt">
                  <div class="car-l-l">
                    <div class="img-box"><a @click="goodsDetails(item.productId)"><img :src="item.productPic" alt=""></a></div>
                    <div class="ellipsis"><a style="color: #626262;" @click="goodsDetails(item.productId)">{{item.productName}}</a></div>
                  </div>
                  <div class="cart-l-r">
                    <div>¥ {{Number(item.productRealPrice).toFixed(2)}}/{{item.productCount}}</div>
                    <div class="num">{{item.productPrice}}</div>

                  </div>
                </div>
                <div class="cart-r">
                  <span><div class="num">{{item.returnAmount}}</div></span>
                  <span><div class="num">{{item.status | formatStatus}}</div></span>
                </div>
              </div>

            </div>
          </div>
        </div>
        <div v-loading="loading" element-loading-text="加载中..." class="no-info" v-else>
          <div style="padding: 100px 0;text-align: center">
            你还未创建过订单
          </div>
        </div>
      </div>
    </y-shelf>
    <div style="float:right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { aftersaleslist } from '/api/goods'
  import YShelf from '/components/shelf'
  import { getStore } from '/utils/storage'
  import {
  		formatDate
  	} from '@/utils/date';
  	const defaultStatusOptions=[
        {
          label: '待处理',
          value: 0
        },
        {
          label: '处理中',
          value: 1
        },
        {
          label: '已完成',
          value: 2
        },
        {
          label: '已拒绝',
          value: 3
        }
      ];
       const defaultTypeOptions=[
          {
            label: '换货',
            value: 0
          },
          {
            label: '退钱',
            value: 1
          },
          {
            label: '退货',
            value: 2
          },
          {
            label: '退钱退货',
            value: 3
          }
        ];
  export default {
    data () {
      return {
        orderLists: [0],
        userId: '',
        orderStatus: '',
        loading: true,
        currentPage: 1,
        pageSize: 5,
        total: 0
      }
    },
    filters: {
    			filterDate(time) {
    				let date = new Date(time);
    				return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    			},

      formatStatus(status){
        for(let i=0;i<defaultStatusOptions.length;i++){
          if(status===defaultStatusOptions[i].value){
            return defaultStatusOptions[i].label;
          }
        }
      },
    			},
    methods: {
      message (m) {
        this.$message.error({
          message: m
        })
      },
      handleSizeChange (val) {
        this.pageSize = val
        this._orderList()
      },
      handleCurrentChange (val) {
        this.currentPage = val
        this._orderList()
      },
      orderPayment (orderId) {
        window.open(window.location.origin + '#/order/payment?orderId=' + orderId)
      },
      goodsDetails (id) {
        window.open(window.location.origin + '#/goodsDetails?id=' + id)
      },
      orderDetail (orderId) {
        this.$router.push({
          path: 'orderDetail',
          query: {
            orderId: orderId
          }
        })
      },
      getOrderStatus (status) {
        if (status === '1') {
          return '支付审核中'
        } else if (status === '2') {
          return '待发货'
        } else if (status === '3') {
          return '待收货'
        } else if (status === '4') {
          return '交易成功'
        } else if (status === '5') {
          return '交易关闭'
        } else if (status === '6') {
          return '支付失败'
        }
      },
      _orderList () {
           var userInfo = getStore('userInfo');
                 if (!userInfo) {
                            this.$router.push({ path: '/login' })
                          }
        let params = {

            pageSize: this.pageSize,
            pageNum: this.currentPage

        }
        aftersaleslist(params).then(res => {
          this.orderLists = res.data.records
          this.total = res.data.total
          this.loading = false
        })
      },

    },
    created () {
      this.userId = getStore('userId')
      this._orderList()
    },
    components: {
      YShelf
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../../assets/style/mixin";

  .gray-sub-title {
    height: 38px;
    padding: 0 24px;
    background: #EEE;
    border-top: 1px solid #DBDBDB;
    border-bottom: 1px solid #DBDBDB;
    line-height: 38px;
    font-size: 12px;
    color: #666;
    display: flex;
    span {
      display: inline-block;
      height: 100%;
    }
    .first {
      display: flex;
      justify-content: space-between;
      flex: 1;
      .f-bc {
        > span {
          width: 112px;
          text-align: center;
        }
      }
    }
    .last {
      width: 230px;
      text-align: center;
      display: flex;
      border-left: 1px solid #ccc;
      span {
        flex: 1;
      }
    }
  }

  .bt {
    border-top: 1px solid #EFEFEF;
  }

  .date {
    padding-left: 0px;
  }

  .order-id {
    margin-left: 25px;
  }

  .cart {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    &:hover {
      .del-order {
        display: block;
      }
    }
    .del-order {
      display: none;
    }
    .cart-l {
      display: flex;
      align-items: center;
      flex: 1;
      padding: 15px 0;
      justify-content: space-between;
      position: relative;
      &:before {
        position: absolute;
        content: ' ';
        right: -1px;
        top: 0;
        width: 1px;
        background-color: #EFEFEF;
        height: 100%;
      }
      .ellipsis {
        margin-left: 20px;
        width: 220px;
      }
      .img-box {
        border: 1px solid #EBEBEB;
      }
      img {
        display: block;
        @include wh(80px);
      }
      .cart-l-r {
        display: flex;
        > div {
          text-align: center;
          width: 112px;
        }
      }
      .car-l-l {
        display: flex;
        align-items: center;
      }
    }
    .cart-r {
      width: 230px;
      display: flex;
      span {
        text-align: center;
        flex: 1;
      }
    }
  }

  .prod-operation {
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 254px;
    div {
      width: 100%;
      text-align: center;
    }
    div:last-child {
      padding-right: 24px;
    }
  }
</style>
